<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>贪吃蛇</title>
    <style>
        * {
            margin: 0;
        }

        canvas {
            background: #90beec;
            margin: 100px auto;
            display: block;
            box-shadow: 0px 0px 10px #000;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="450" height="450"></canvas>
<script>
    var spet = 500;
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    //初始化蛇的长度
    var snakeCount = 6;
    context.strokeStyle = "#555554";
    //创建一个集合存储蛇的坐标
    var snake = [];
    //定义初始化蛇移动的方法
    var toGo = 3;
    //初始化食物的坐标
    var foodX = 150;
    var foodY = 150;

    function drawRect() {
        for (var i = 0; i < 30; i++) {
            context.beginPath();
            context.moveTo(15 * i, 0);
            context.lineTo(15 * i, 450);
            context.closePath();
            context.stroke();
            context.beginPath();
            context.moveTo(0, 15 * i);
            context.lineTo(450, 15 * i);
            context.closePath();
            context.stroke();
        }
        //绘制蛇的身体
        for (var i = 0; i < snakeCount; i++) {
            context.fillStyle = "#000";
            if (i == snakeCount - 1) {
                context.fillStyle = "red";
            }
            context.fillRect(snake[i].x, snake[i].y, 15, 15);//绘制蛇
        }
        //    设置食物的颜色
        context.fillStyle = "#0000";
        context.fillRect(foodX, foodY, 15, 15);
        context.fill();
    }

    //    定义蛇的坐标
    function start() {
        for (var i = 0; i < snakeCount; i++) {
            snake[i] = {x: 15 * i, y: 0}
        }
        addFood();
        drawRect();
    }

    //食物的坐标
    function addFood() {
        foodX = Math.floor(Math.random() * 30) * 15;
        foodY = Math.floor(Math.random() * 30) * 15;
        for (var i = 0; i < snakeCount - 1; i++) {
            if (foodX == snake[i].x && foodY == snake[i].y) {
                addFood();
            }
        }
    }

    //蛇移动的方向
    function move() {
        switch (toGo) {
            case 1:
                snake.push({x: snake[snakeCount - 1].x - 15, y: snake[snakeCount - 1].y});
                break;
            case 2:
                snake.push({x: snake[snakeCount - 1].x, y: snake[snakeCount - 1].y - 15});
                break;
            case 3:
                snake.push({x: snake[snakeCount - 1].x + 15, y: snake[snakeCount - 1].y});
                break;
            case 4:
                snake.push({x: snake[snakeCount - 1].x, y: snake[snakeCount - 1].y + 15});
                break;
        }
        snake.shift();
        context.clearRect(0, 0, 450, 450);//清空画布
        isEat();
        drawRect();//重新绘制一次
    }

    //吃到食物
    function isEat() {
        if (snake[snakeCount - 1].x == foodX && snake[snakeCount - 1].y == foodY) {
            addFood();
            snakeCount++;
            snake.unshift({x: -15, y: -15});
            spet -= 5;
        }
    }

    //键盘按下
    function keyDown(e) {
        switch (e.keyCode) {
            case 37:
                toGo = 1;
                break;
            case 38:
                toGo = 2;
                break;
            case 39:
                toGo = 3;
                break;
            case 40:
                toGo = 4;
                break;
        }
    }

    window.onload = function () {
        document.onkeydown = function (e) {
            //判断键码值
            keyDown(e);
        };
        setInterval(move, spet);
        start();
        drawRect();
    }

</script>
</body>
</html>